<!-- 旅程留影-全部 -->
<!-- 1、分为三个模块，旅程留影相册、共享旅程相册、列表相册
	2、自写列表相册-->
<template>
  <view :style="{height : pageHeight + 'px'}" class="content">
    <view class="travelAlbum">
      <tui-section background="#fff" is-line margin="0rpx 0rpx 10rpx 20rpx" title="旅程留影"></tui-section>
      <!-- 相册图片列表 -->
      <view class="photoList">
        <view v-for="(item,index) in travelList.itineraryPhotos" :key="index" class="photoItem"
              @tap="showPreviewModal(item)">
          <image :src="item.url" mode="scaleToFill"></image>
        </view>
      </view>
    </view>
    <view class="shareAlbum">
      <tui-section background="#fff" is-line margin="0rpx 0rpx 10rpx 20rpx" title="共享旅程照片"></tui-section>
      <view class="photoList">
        <view v-for="(item,index) in travelList.itinerarySharingPhotos" :key="index" class="photoItem"
              @tap="preview2(item)">
          <image :src="item.url" mode="scaleToFill"></image>
        </view>
      </view>
    </view>
    <!-- 景点列表相册 -->
    <view class="listAlbum">
      <view v-for="(item,index) in travelList.scenics" :key="index" class="placeItem">
        <!-- 图标 -->
        <view class="placeIcon">
          <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/locIconSelect.png">
          </image>
        </view>
        <view class="placeName">
          <text>{{ item.name }}</text>
          <view @tap="isShowTask(index)">
            <tui-icon :name="[showPlaceTaskList[index].isShow ? 'arrowup' :'arrowdown']"
                      :size="25"></tui-icon>
          </view>
        </view>
        <!-- 景点照片 -->
        <view class="placePhotoList">
          <view v-for="(ite,index) in item.scenicPhotos" :key="index" class="photoItem"
                @tap="previewImagePlace(index)">
            <image :src="ite.url" mode="scaleToFill"></image>
          </view>
        </view>
        <!-- 景点任务照片 -->
        <view v-for="(task,index) in item.tasks" v-if="task.taskPhotos.length>0&&showPlaceTaskList[index].isShow"
              :key="index"
              class="taskPhotoItem">
          <view class="taskName">
            <text>任务:{{ task.name }}</text>
          </view>
          <!-- 任务照片列表 -->
          <view class="taskPhotoList">
            <view v-for="(p,index) in task.taskPhotos" :key="index" class="photoItem">
              <image :src="p.url" mode="scaleToFill"></image>
            </view>
          </view>

        </view>
        <!-- 景点共享照片 -->
        <view class="taskPhotoItem">
          <view class="taskName">
            <text>共享景点照片</text>
            <view v-if="roles.leader" class="uploadText" @tap="uploadSenicShare(item)">
              上传团队照片
            </view>
          </view>
          <view class="taskPhotoList">
            <view v-for="(i,index) in item.scenicSharingPhotos" :key="index" class="photoItem"
                  @tap="previewPlaceShared(index)">
              <image :src="i.url" mode="scaleToFill"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--拍照按钮  -->
    <view class="takePhoto" @tap="takeUpLoad">
      <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/takePhoto.png"></image>
    </view>
    <!-- 旅行相册图片点击操作列表 -->
    <tui-actionsheet :item-list="itemList" :show="showActionSheet" @cancel="this.showActionSheet= false"
                     @click="selectClick">
    </tui-actionsheet>
    <!--共享相册图片点击操作列表-->
    <tui-actionsheet :item-list="itemList2" :show="showActionSheet2" @cancel="this.showActionSheet2= false"
                     @click="selectClickShare">
    </tui-actionsheet>
    <!--图片预览  -->
    <tui-gallery :current="previewCurrent" :show="showMask" :urls="urls" @hide="showMask = false"></tui-gallery>
  </view>
</template>

<script>
import {
  getPlacePhotoList,
  addPlacePhoto,
  delPlacePhoto,
  isSharePhoto,
  upLoadGroupPhoto
} from '@/api/tourplan.js'
import {
  baseUrl
} from "@/common/unit.js"

export default {
  data() {
    return {
      pageHeight: 750,
      travelList: [],
      showPlaceTaskList: [],
      itineraryId: 0,
      partyId: 0,
      groupId: 0,
      serverUrl: baseUrl + '/user/uploadFile/uploadFile',
      imageItem: {},
      showActionSheet: false,
      itemList: [{
        text: "查看",
        color: "#2B2B2B"
      }, {
        text: "共享",
        color: "#2B2B2B"
      }, {
        text: "删除",
        color: "#ff0000"
      }],
      itemList2: [{
        text: "查看",
        color: "#2B2B2B"
      }, {
        text: "取消共享",
        color: "#ff0000"
      }],
      urls: [{
        src: '',
        desc: ''
      }], //图片预览url
      showMask: false, //是否预览
      showActionSheet2: false,
      roles: {}, //角色
      previewCurrent: 0,

    }
  },
  onShow() {

  },
  onLoad(data) {
    const that = this
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight
      }
    });
    that.initData(data)
  },
  onUnload() {

  },
  methods: {
    initData(data) {
      const that = this
      that.itineraryId = data.itineraryId
      that.partyId = data.partyId
      that.groupId = data.groupId
      that.roles = JSON.parse(decodeURIComponent(data.rolesJSON))
      that.getAlbumList()
    },
    getAlbumList() {
      const that = this
      getPlacePhotoList({
        tel: uni.getStorageSync('userinfo').phone,
        itineraryId: this.itineraryId, //不传景点id时是获取旅程相册
      }).then(res => {
        that.travelList = res
        that.initShowTask(res.scenics.length)
      })
    },
    //照片上传
    takeUpLoad() {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.serverUrl, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            success: (uploadFileRes) => {
              const result = JSON.parse(uploadFileRes.data)
              that.postAddPic(result.data, 0)
            }
          });
        }
      })
    },
    //提交新增照片
    postAddPic(url, status) {
      const that = this
      that.loadingTips = true
      addPlacePhoto({
        itineraryId: that.itineraryId,
        partyId: that.partyId,
        highlightMomentUrl: url,
        groupId: that.groupId,
        status: status > 0 ? status : 0,
      }).then(res => {
        that.getAlbumList()
      }).catch(err => {

      })
    },

    isShowTask(index) {
      const that = this
      that.showPlaceTaskList[index].isShow = !that.showPlaceTaskList[index].isShow
    },
    //初始化折叠控件数组
    initShowTask(length) {
      for (let i = 0; i < length; i++) {
        this.showPlaceTaskList.push({
          isShow: true
        })
      }
      console.log('折叠控件初始化', this.showPlaceTaskList)
    },

    //点击旅行相册显示操作列表
    showPreviewModal(item) {
      //获取当前点击的图片信息
      this.imageItem = item
      this.showActionSheet = true
    },
    //点击共享相册显示操作列表
    preview2(item) {
      this.imageItem = item
      this.showActionSheet2 = true
    },

    //旅行相册操作列表点击处理
    selectClick(e) {
      const that = this
      console.log(e)
      if (e.index < 1) {
        //预览
        this.previewImage(this.imageItem.url)
      } else if (e.index === 1) {
        //共享
        console.log(this.imageItem)
        this.isShared(this.imageItem.id, 1)
      } else if (e.index === 2) {
        //删除
        console.log(this.imageItem)
        that.delectPic(this.imageItem.id, this.imageItem.url)
      }
      this.showActionSheet = false
    },

    //共享相册操作列表点击处理
    selectClickShare(e) {
      const that = this
      if (e.index === 1) {
        //取消共享
        this.isShared(this.imageItem.id, 0)
      } else {
        //查看
        this.previewImage(this.imageItem.url)
      }
      this.showActionSheet2 = false
    },

    //预览图片
    previewImage(url) {
      this.urls[0].src = url
      this.showMask = true
    },

    //删除图片
    delectPic(id, url) {
      const that = this
      that.loadingTips = true
      delPlacePhoto(id, {
        itineraryId: that.itineraryId,
        partyId: that.partyId,
        highlightMomentUrl: url,
        groupId: that.groupId,
        status: 0,
      }).then(res => {
        that.getAlbumList()
      }).catch(err => {
        console.log(err)
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    //是否共享享照片
    isShared(id, status) {
      const that = this
      that.loadingTips = true
      isSharePhoto({
        highlightId: id,
        status: status
      }).then(res => {
        that.getAlbumList()
      }).catch(err => {
        console.log(err)
      })
    },
    //上传景点共享照片--组长
    uploadSenicShare(item) {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.serverUrl, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            success: (uploadFileRes) => {
              const result = JSON.parse(uploadFileRes.data)
              that.postGruopSenicPhoto(item.id, result.data)
            }
          });
        }
      })
    },
    //提交照片
    postGruopSenicPhoto(scenicId, url, nextSenicId) {
      const that = this
      upLoadGroupPhoto({
        itineraryId: that.itineraryId,
        tel: uni.getStorageSync('userinfo').phone,
        scenicId: scenicId,
        url: url,
      }).then(res => {
        that.getAlbumList()
      })
    },

    //景点照片查看
    previewImagePlace(index) {
      const that = this
      const data = that.travelList.scenics
      const photoList = data.map(item => item.scenicPhotos)
      const AllPhotoList = photoList.flatMap(innerArray => innerArray)
      this.urls = []
      for (let i = 0; i < AllPhotoList.length; i++) {
        this.urls.push({
          desc: '',
          src: AllPhotoList[i].url
        })
      }
      this.previewCurrent = index
      console.log(this.urls)
      this.showMask = true
    },

    //查看该景点下的共享相册
    previewPlaceShared(index) {
      const that = this
      const data = that.travelList.scenics
      const photoList = data.map(item => item.scenicSharingPhotos)
      const AllPhotoList = photoList.flatMap(innerArray => innerArray)
      this.urls = []
      for (let i = 0; i < AllPhotoList.length; i++) {
        this.urls.push({
          desc: '',
          src: AllPhotoList[i].url
        })
      }
      this.previewCurrent = index
      console.log(this.urls)
      this.showMask = true
    }
  }
}
</script>

<style>
@import url('journeyAlbum.css');
</style>
